<template>
     <!--面包屑-->
<div style="margin-bottom: 30px">
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>
    <router-link to="/MainShow">维修管理</router-link>
    
   </el-breadcrumb-item>
   <el-breadcrumb-item>维修信息显示</el-breadcrumb-item>
 </el-breadcrumb>
</div>
 <h2>维修记录</h2>   
 <el-form :inline="true" :model="from" class="demo-form-inline">
 <el-form-item label="维修负责人">
      <el-input v-model="from.maintenanceManager" placeholder="维修负责人" clearable style="width: 200px" />
    </el-form-item>
    <el-form-item label="维修日期">
        <el-date-picker
        v-model="from.repairDate"
        type="date" value-format="YYYY-MM-DD"
        placeholder="维修日期" 
        clearable
      />
    </el-form-item>
    <el-form-item label="车牌号">
      <el-input v-model="from.licensePlateNumber" placeholder="车牌号" clearable style="width: 200px" />
    </el-form-item>
  </el-form>
    <el-button size="small" type="primary" @click="Mainshow()" >查询</el-button>
    <el-button size="small" type="primary"  @click="Add()">新增</el-button>
    <el-button size="small" type="primary" @click="Dels()"  >批量删除</el-button>
    <el-button size="small" type="primary" @click="chong()"  >重置</el-button>
    <el-button size="small" type="primary" @click="getExport()">导出</el-button>
    
 <el-table :data="tableData" style="width: 100%"  @selection-change="handleSelectionChange">
  <el-table-column type="selection"  width="55" />
    <el-table-column prop="repairTitle" label="维修标题" width="100" />
    <el-table-column prop="repairType" label="维修类型" width="100" />
    <el-table-column prop="licensePlateNumber" label="车牌号" width="100" />
    <el-table-column prop="repairAmount" label="维修金额" width="100" />
    <el-table-column prop="maintenanceManager" label="维修负责人" width="100" />
    <el-table-column prop="repairDescription" label="维修描述" width="100" />
    <el-table-column prop="repairDate" label="维修日期" width="100" >
      <template #default="scope">
          <span v-if="scope.row.repairDate">{{ scope.row.repairDate.substring(0,10) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="notes" label="备注" width="100" />
    <el-table-column prop="createdDate" label="创建时间" width="100" >
      <template #default="scope">
        <span v-if="scope.row.createdDate == null ? '' : scope.row.createdDate">{{
                    scope.row.createdDate.substring(0, 10) }}</span>
      </template>
    </el-table-column>
    <el-table-column  label="操作" width="300" >
      <template #default="scope">
        <el-button size="small" @click="Update(scope.row.maintenanceId)">编辑</el-button>
          <el-button size="small" type="danger" @click="Del()">删除</el-button>
          <el-button size="small" type="primary" @click="look(scope.row.maintenanceId)">查看</el-button>
      </template>
        
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:current-page="page.Pageindex"
      v-model:page-size="page.Pagesize"
      :page-sizes="[3, 6, 9, 11]"
       layout="total, sizes, prev, pager, next, jumper"
      :total="page.TotalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
   
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="1300"
   
  >
    <span>
     <table>
      <thead>
        <tr>
          <th>维修标题</th>
          <th>维修类型</th>
          <th>车牌号</th>
          <th>维修金额</th>
          <th>维修负责人</th>
          <th>维修描述</th>
          <th>维修日期</th>
          <th>备注</th>
          <th>创建时间</th>
       
        </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{backfill.repairTitle}}</td>
      <td>{{backfill.repairType}}</td>
      <td>{{backfill.licensePlateNumber}}</td>
      <td>{{backfill.repairAmount}}</td>
      <td>{{backfill.maintenanceManager}}</td>
      <td>{{backfill.repairDescription}}</td>
      <td>{{backfill.repairDate}}</td>
      <td>{{backfill.notes}}</td>
      <td>{{backfill.createdDate}}</td>
  </tr>
  </tbody>
 
     </table>
  


    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
       
      </div>
    </template>
  </el-dialog>
 
</template>
    
<script setup lang='ts'>
import axios  from 'axios';
const dialogVisible = ref(false) 
import { ElMessage, ElMessageBox } from 'element-plus'
import { fr } from 'element-plus/es/locales.mjs';
  import { ref, reactive, onMounted,watch } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();
  const from=reactive({
    maintenanceManager:'',
    repairDate:'',
    licensePlateNumber:''
  })
  const multipleSelection = ref([])
  const multipleSelections = ref([])
 //多选用于批删
 const handleSelectionChange = (val:any) => {
  multipleSelection.value=(val.map(o=>o.maintenanceId))
multipleSelections.value = val//多选整条数据
}
//导出
import * as XLSX from 'xlsx';// 导出Excel
const getExport = () => {
  // let url = '/bread/api/CargoOwners/GetExcelName?CargoOwnerName='+forms.CargoOwnerName+'&CargoOwnerPhone='+forms.CargoOwnerPhone+'&DriverLicenseDate='+forms.DriverLicenseDate+'&PageIndex='+page.PageIndex+'&PageSize='+page.PageSize
  // window.location.href = url;
    //  this.selectdata 是复选框的 数据列表
        if (multipleSelections.value.length <= 0) {
            ElMessage.warning('请选择数据！');
            return;
        }
        let tableData = [
            ['序号','维修标题','维修类型', '车牌号', '维修金额',"维修负责人","维修描述","维修日期","备注"]//导出表头
        ] // 表格表头
        multipleSelections.value.forEach((item, index) => {
            let rowData= []
            //导出内容的字段
            rowData = [
                index + 1, 
                item.repairTitle,
              item.repairType,
                  item.licensePlateNumber,
                item.repairAmount,
              item.maintenanceManager,
              item.repairDescription,
              item.repairDate,
              item.notes,
  ]
            tableData.push(rowData)
        })
        let workSheet = XLSX.utils.aoa_to_sheet(tableData);
        let bookNew = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(bookNew, workSheet, '作品名称') // 工作簿名称
        let name = '维修记录' + timeFormat() + '.xlsx'
        XLSX.writeFile(bookNew, name) // 保存的文件名
 
}
const timeFormat=()=> {
        let time = new Date();
        let year = time.getFullYear();
        let month = time.getMonth() + 1;
        let date = time.getDate();
        let hours = time.getHours();
        let minutes = time.getMinutes();
        let seconds = time.getSeconds();
        return year + '-' + addZero(month) + '-' + addZero(date) + ' ' + addZero(hours) + ':' + addZero(minutes) + ':' + addZero(seconds);
}
const addZero=(num:any)=> {
    return num < 10 ? '0' + num : num
}
  const chong=()=>{
    from.maintenanceManager='',
    from.repairDate='',
    from.licensePlateNumber=''
    window.location.reload()
  }
    const tableData = ref([])
    onMounted(() => {
        Mainshow()
    })
    //分页
    const page=reactive({
    Pageindex:1,
    Pagesize:2,
    TotalCount:0,
    PageCount:0

   })
    //显示
    const Mainshow = () => {
         axios.get('/carread/api/Main/MShowMain',{
          params:{
            maintenanceManager:from.maintenanceManager,
            repairDate:from.repairDate,
            licensePlateNumber:from.licensePlateNumber,
            Pageindex:page.Pageindex,
            Pagesize:page.Pagesize
          }
         }).then(res => {
            tableData.value = res.data.data.list
            page.TotalCount=res.data.data.totalCount
            page.PageCount=res.data.data.pageCount
            console.log(res.data.data.list);
        })
    }
  
    //新增
    const Add=()=>{
        router.push('/MainAdd')
    }
    //批量删除
    const Dels=()=>{
    
      if (multipleSelection.value.length == 0) { 
        ElMessage.error('请选择要删除的数据')
        return
    }
    ElMessageBox.confirm(
    '您确定要删除吗？',
    '删除维修记录',
    {
      confirmButtonText: '是的',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      console.log(multipleSelection.value)
      axios.post('/carwrite/api/Mainwrite/DeleteAllMainRecord',{
        MaintenanceId:multipleSelection.value
        }).then(res=>{
          console.log(res)
          if(res.data.data==1){
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
            Mainshow()
          }
        })

    })
    }
    //编辑
    const Update=(maintenanceId:number)=>{
      router.push({
      path:'/MainUpdate',
      query:{maintenanceId:maintenanceId}

   })

       }
  
    
    //删除
    const Del=()=>{
        ElMessageBox.confirm(
    '您确定要删除吗？',
    '删除维修记录',
    {
      confirmButtonText: '是的',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        axios.post('/carwrite/api/Mainwrite/DeleteAllMainRecord',{
          MaintenanceId:multipleSelection.value
        }).then(res=>{
          console.log(res)
          if(res.data.data==1){
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
            Mainshow()
          }
        })
        })
       }
    const backfill=ref({})
const look =(maintenanceId:number)=>{
  console.log(maintenanceId)
  dialogVisible.value=true
  axios.get('/carread/api/Main/MaintRecord', {
        params: {
          MaintenanceId: maintenanceId
        }
      }).then(res => {
      backfill.value=res.data
      console.log(res.data)
       
    })
  }
  //分页
const handleSizeChange = (val:any) => {
    page.Pagesize=val;
    Mainshow();
  }
  const handleCurrentChange = (val:any) => {
    page.Pageindex=val;
    Mainshow();
  } 
</script>
    
<style>
    
</style>